<template>
  <div class="love">
    <div class="tag container">
      <router-link  v-for="item of tags" :key="item.tagId" :class="{active:$route.params.id==item.tagId}"  :to="'/class/'+item.tagId">{{item.tagName}}</router-link>
    </div>
    <picture-list :url="next"></picture-list>  
  </div>
</template>
<script>
import {ref, defineComponent,computed,watchEffect, watch} from "vue";
import { useStore } from "vuex";
import { useRoute } from 'vue-router'
import axios from 'axios'
import PictureList from "../components/PictureList";
export default defineComponent({
  components: {
      PictureList
  },
  data(){
    return {
      tags:[]
    }
  },
  setup() {
    const store = useStore();
    const route = useRoute()
    let tags=ref('')
    axios.get(`/apis/wallpapercontent/wallpaper/classify/tags`).then(res=>{
      tags.value= res.data.data.wallpaperTags
    }).catch(e=>{

    })
    let next=ref('0')
    watchEffect(() => {
      if(route.name=="class"){
         const tarId =route.params.id
          for(let i=0;i<tags.value.length;i++){
            if(tags.value[i].tagId==tarId){
              document.title=tags.value[i].tagName+'-来自联想锁屏'
            }
          }
          let url=`/wallpapercontent/wallpaper/classify/tag_wallpapers?skip=0&limit=30&tagId=${tarId}&refresh=true`
          next.value=url
          store
            .dispatch("getList",url)
            .then((data) => {
              console.log(data)
            })
            .catch((e) => {
              console.log(e);
          });
      }
    })
    return {
      next,
      tags
    }
  },
  created(){
  
  }
});
</script>
<style lang="stylus" scoped>
.tag
  overflow hidden
  .active 
    color rgb(34,98,224)
    font-weight bold
    font-size 18px
  a
    font-size 16px
    float left 
    margin 10px
    color #000
    text-decoration none
    transition all .3s
    line-height 18px
    &:hover
      color rgb(34,98,224)
  
</style>
